import React from 'react'
import { ScrollView, View, Animated, StyleSheet, ImageBackground } from 'react-native'
import { HEIGHT, STATUSBAR_HEIGHT, WIDTH } from '../../utils/ScreenUtil'
import { TabBar, TabView } from 'react-native-tab-view'
import ContactsList from './ContactsList'

const initialLayout = {
  height: 0,
  width: WIDTH
}
const HEADER_HEIGHT = 240
const COLLAPSED_HEIGHT = 52 + STATUSBAR_HEIGHT
const SCROLLABLE_HEIGHT = HEADER_HEIGHT - COLLAPSED_HEIGHT
export default class TestFlatList extends React.Component {
  constructor (props) {
    super(props)

    this.state = {
      index: 0,
      routes: [
        { key: '1', title: 'First' },
        { key: '2', title: 'Second' },
        { key: '3', title: 'Third' }
      ],
      scroll: new Animated.Value(0)
    }
    this.translateY = this.state.scroll.interpolate({
      inputRange: [0, SCROLLABLE_HEIGHT],
      outputRange: [0, -SCROLLABLE_HEIGHT],
      extrapolate: 'clamp'
    })
  }

  _handleIndexChange = index => {
    this.setState({ index })
  }

  _renderHeader = props => {
    const translateY = this.state.scroll.interpolate({
      inputRange: [0, SCROLLABLE_HEIGHT],
      outputRange: [0, -SCROLLABLE_HEIGHT],
      extrapolate: 'clamp'
    })

    return (
      <Animated.View style={[styles.header, { transform: [{ translateY }] }]}>
        <View style={styles.cover}>
          <View style={styles.overlay}/>
          <TabBar {...props} style={styles.tabbar}/>
        </View>
      </Animated.View>
    )
  }

  _renderScene = () => {
    return (
      <ContactsList
        scrollEventThrottle={1}
        onScroll={Animated.event(
          [{ nativeEvent: { contentOffset: { y: this.state.scroll } } }],
          { useNativeDriver: true }
        )}
        contentContainerStyle={{ paddingTop: HEADER_HEIGHT }}
      />
    )
  }

  render () {
    return (
      <TabView
        style={styles.container}
        navigationState={this.state}
        renderScene={this._renderScene}
        renderHeader={this._renderHeader}
        onIndexChange={this._handleIndexChange}
        initialLayout={initialLayout}
      />
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  overlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, .32)'
  },
  cover: {
    height: HEADER_HEIGHT,
    backgroundColor: 'red'
  },
  header: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    zIndex: 1,
    backgroundColor: 'blue'
  },
  tabbar: {
    backgroundColor: 'rgba(0, 0, 0, .32)'
  }
})
